<template>
  <form :id="formId">
    <div class="form-group" v-for="v in formData">
      <div v-if="['text','search','password','email','hidden'].indexOf(v.type)>-1">
        <label :for="v.type+v.name" v-if="v.title">{{v.title}}</label>
        <input :type="v.type" class="form-control form-control-sm" :id="v.type+v.name" :placeholder="v.placeholder" :readonly="v.readOnly" :disabled="v.disabled" v-model="v.value" :name="v.name">
        <small class="form-text text-muted" v-if="v.remark!==''">{{v.remark}}</small>
      </div>
      <div v-else-if="['radio','checkbox'].indexOf(v.type)>-1">
        <label v-if="v.title">{{v.title}}：</label>
        <div v-for="(vv, vvKey) in v.values" class="custom-control custom-checkbox custom-control-inline">
          <input :type="v.type" class="custom-control-input" :checked="vv.checked" :id="v.type+v.name+vvKey" :value="vv.value" :name="v.name" v-model="v.value">
          <label class="custom-control-label" :for="v.type+v.name+vvKey">{{vv.title}}</label>
        </div>
        <small class="form-text text-muted" v-if="v.remark!==''">{{v.remark}}</small>
      </div>
      <div v-else-if="['select'].indexOf(v.type)>-1">
        <label :for="v.type+v.name" v-if="v.title">{{v.title}}</label>
        <select class="custom-select custom-select-sm" title="" :id="v.type+v.name" v-model="v.value">
          <option selected>请选择{{v.title}}</option>
          <option value="1" v-for="(vv, vvKey) in v.options" :value="vv.value" :selected="vv.selected">{{vv.title}}
          </option>
        </select>
        <small class="form-text text-muted" v-if="v.remark!==''">{{v.remark}}</small>
      </div>
      <div v-else-if="'textarea'===v.type">
        <label :for="v.type+v.name" v-if="v.title">{{v.title}}</label>
        <textarea class="form-control form-control-sm" id="v.type+v.name" :placeholder="v.placeholder" :readonly="v.readOnly" :disabled="v.disabled" v-model="v.value"></textarea>
      </div>
    </div>
    <button type="button" class="btn btn-primary btn-sm" @click="submit()">
      提交
    </button>
    <button type="reset" class="btn btn-secondary btn-sm" @click="reset()">
      清除
    </button>
  </form>
</template>

<script>
  
  export default {
    data() {
      return {
        formId: Math.random(),
      };
    },
    props: {
      formData: {
        type: Array,
        required: true,
      },
      cbf: {
        type: Function,
        required: true,
      },
    },
    methods: {
      submit() {
        let data = {};
        for (let v of this.formData) {
          data[v.name] = v.value;
        }
        this.cbf(data);
      },
      reset() {
      },
    },
    mounted() {
    
    },
    beforeDestroy() {
    }
  }
</script>

<style scoped>

</style>
